<template>
	<div class="mainsu">
		<div class="main_spac1">
			<div class="main_white padding10 paddingBottom20">
				<div class="mainor_form">
					<div class="mainor_te"></div>
					<el-form
						:inline="true"
						:model="form"
						class="demo-form-inline"
						ref="userListFrom"
						label-width="70px"
					>
						<el-form-item label="操作日期" prop="createTime">
							<el-date-picker
								v-model="createTime"
								type="daterange"
								class="time220"
								:editable="false"
								unlink-panels
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								:clearable="false"
								:picker-options="pickerOptions"
							/>
						</el-form-item>
						<el-form-item label="商品" prop="goods_spu_id">
							<change-goods-input
								ref="changeGoodsInput"
								@clear="
									() => {
										this.form.goods_spu_id = '';
									}
								"
								@sendValue="
									(data) => {
										this.form.goods_spu_id = data.id;
									}
								"
							></change-goods-input>
						</el-form-item>
						<el-form-item label="分拣员" prop="sor_id">
							<el-select
								v-model.trim="form.sor_id"
								placeholder="分拣员"
								class="wid220"
							>
								<el-option label="所有" value=""></el-option>
								<el-option
									v-for="(user, index) in user"
									:key="index"
									:label="user"
									:value="index"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="供应商" prop="supply_id">
							<el-select
								v-model.trim="form.supply_id"
								placeholder="直供供应商"
								class="wid220"
							>
								<el-option label="所有" value=""></el-option>
								<el-option
									v-for="(supply_direct, index) in supply_direct"
									:key="index"
									:label="supply_direct"
									:value="index"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="分拣操作" prop="status">
							<el-select
								v-model.trim="form.status"
								placeholder="分拣操作"
								class="wid220"
							>
								<el-option label="所有" value="0"></el-option>
								<el-option
									v-for="(status, index) in status"
									:key="index"
									:label="status"
									:value="index"
								></el-option>
							</el-select>
						</el-form-item>
						<div class="clearfix"></div>
						<el-form-item class="marginTop10">
							<el-button
								class="reset marginLeft10"
								type="primary"
								@click="reset"
								>重置</el-button
							>
							<el-button
								type="primary"
								@click="getArticleList"
								:loading="listLoading"
								>搜索</el-button
							>
						</el-form-item>
					</el-form>
				</div>
				<div class="main_table marginTop10" style="min-height: 550px">
					<el-table
						ref="multipleTable"
						v-loading="listLoading"
						:data="list.data"
						element-loading-text="加载中"
						fit
						border
						highlight-current-row
					>
						<el-table-column
							label="订单号"
							prop="order_list_order.order.order_sn"
							show-overflow-tooltip
							min-width="120"
						/>
						<el-table-column
							label="商品名称"
							show-overflow-tooltip
							prop="status"
							min-width="120"
						>
							<template slot-scope="scope"
								>{{
									scope.row.order_list_order
										? scope.row.order_list_order.name
										: ""
								}}【{{
									scope.row.order_list_order
										? scope.row.order_list_order.spu_name
										: ""
								}}】</template
							>
						</el-table-column>
						<el-table-column
							label="用户名称"
							show-overflow-tooltip
							prop="nickname"
							min-width="120"
						/>
						<el-table-column
							label="单位"
							show-overflow-tooltip
							prop="order_list_order.unit"
						/>
						<el-table-column label="分拣员" show-overflow-tooltip prop="">
							<template slot-scope="scope">{{
								user[scope.row.sor_id]
							}}</template>
						</el-table-column>
						<el-table-column label="供应商" show-overflow-tooltip prop="">
							<template slot-scope="scope">{{
								scope.row.supplier ? scope.row.supplier.name : ""
							}}</template>
						</el-table-column>
						<el-table-column
							label="下单数量"
							prop="order_list_order.order_num"
							show-overflow-tooltip
							min-width="110"
						/>
						<el-table-column
							label="分拣数量"
							show-overflow-tooltip
							prop="sor_num"
							min-width="110"
						/>
						<el-table-column label="生产日期" prop="mfg" min-width="110">
							<!-- <template slot-scope="scope">{{
                parseTime(scope.row.created_at, "{y}-{m}-{d} {h}:{i}:{s}")
              }}</template> -->
						</el-table-column>
						<el-table-column
							label="分拣操作"
							show-overflow-tooltip
							prop=""
							min-width="110"
						>
							<template slot-scope="scope">
								<span :class="'status' + scope.row.status">
									{{ status[scope.row.status] }}
								</span>
							</template>
						</el-table-column>
						<el-table-column label="操作时间" min-width="180" prop="main">
							<template slot-scope="scope">{{
								parseTime(scope.row.created_at, "{y}-{m}-{d} {h}:{i}:{s}")
							}}</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="main_page boxdq">
					<div></div>
					<!-- 分页 -->
					<div class="main_page_r">
						<el-pagination
							:current-page="current.page"
							:page-sizes="[100, 200, 300]"
							:page-size="limit"
							layout="total, sizes, prev, pager, next, jumper"
							:total="totalCount"
							background
							@size-change="changeLimit"
							@current-change="changePage"
						/>
					</div>
				</div>
			</div>
		</div>
		<!-- 导出 -->
	</div>
</template>

<script>
	import {
		operate_index,
		export_advice_detail,
	} from "@/api/global/globalOperation";
	import { sorting_log_list } from "@/api/sorting/sortingStart";
	import { apiUrl, objKeySort, Md5 } from "@/utils/public";
	import dateOption from "@/options/dateOption";
	import { parseTime, getWeekStartAndEnd } from "@/utils/index";

	export default {
		components: {},
		data() {
			return {
				// 时间
				parseTime,
				getWeekStartAndEnd,
				// 列表数据
				list: {
					data: [],
				},
				listLoading: false,
				// 搜索
				form: {
					send_time: "",
					end_time: "",
					sor_id: null,
					goods_spu_id: "",
					status: "",
					supply_id: null,
				},
				createTime: getWeekStartAndEnd(),
				pickerOptions: dateOption,

				// 分拣员
				user: {},
				supply_direct: {},
				status: {},
				// 导出
				selectArr: [],
				exportbuVisible: false,
				exportTime: "",
				mode: "",
				// 分页
				current: {
					page: 1,
					per_page: 100,
				},
				limit: 100,
				totalCount: 1,
			};
		},
		created() {
			// 列表
			this.sorting_log_list();
		},
		methods: {
			// 导出明细

			// 搜索
			getArticleList() {
				this.operate_index();
			},
			// 列表
			sorting_log_list() {
				this.listLoading = true;
				let data = Object.assign(
					{
						sign: Md5(
							objKeySort(Object.assign(apiUrl().name, this.current)) +
								apiUrl().appsecret
						),
					},
					apiUrl().name,
					this.current,
					this.list_form()
				);
				sorting_log_list(data).then((res) => {
					if (res.errcode == 0) {
						res.list.info.data.map((e) => {
							e.nickname = "";
							try {
								e.nickname = e.order_list_order.order.company_name.nickname;
							} catch (error) {
								console.error(error);
							}
						});
						this.list = res.list.info;
						this.user = res.list.user;
						this.supply_direct = res.list.supply_direct;
						this.status = res.list.status;
						this.listLoading = false;
						this.totalCount = res.list.info.total;
					}
				});
			},
			list_form() {
				let form = JSON.parse(JSON.stringify(this.form));
				form.send_time = this.createTime[0] ? this.createTime[0] : "";
				form.end_time = this.createTime[1] ? this.createTime[1] : "";

				return form;
			},
			// 监听全选
			handleSelectionChange(val) {
				this.selectArr = [];
				val.map((item) => {
					this.selectArr.push({ id: item.id });
				});
			},
			// 导出时间范围
			datepicker(val) {
				let start = "";
				let end = "";
				if (val) {
					start = new Date(val[0]).getTime();
					end = new Date(val[1]).getTime();
					if (end - start > 30 * 24 * 60 * 60 * 1000) {
						this.$message.error("选择范围不能超过一个月，请重新选择");
						this.exportTime = "";
					}
				}
			},
			// 分页
			changeLimit(pageSize) {
				this.current.per_page = pageSize;
				this.sorting_log_list();
			},
			changePage(page) {
				this.current.page = page;
				this.sorting_log_list();
			},
			// 搜索
			getArticleList() {
				this.current.page = 1;
				this.sorting_log_list();
			},
			// 重置
			reset() {
				this.$refs["userListFrom"].resetFields();
				this.$refs["changeGoodsInput"].name = "";
				this.createTime = [];
				this.sorting_log_list();
			},
		},
	};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
	.mainor_form form {
		width: calc(100% - 120px);
	}
}

// 导出订单表头
.exptitle {
	display: block;
	font-size: 16px;
	color: #000000;
	margin: 0 0 10px;
}
.company_name {
	padding-top: 15px;
}
.maintip {
	text-align: center;
	padding-top: 15px;
	font-size: 18px;
	span {
		display: inline;
		padding: 18px 0;
		color: red;
	}
}
.isexportCheckbox {
	margin-top: 15px;
}
.company_name_box {
	.company_name {
		padding-top: 0;
	}
}
.status1 {
	color: #03a98e;
}
.status2 {
	color: #118ab2;
}
.status3 {
	color: #f56c6c;
}
</style>
